import * as THREE from 'three';
// 引入性能监视器
import Stats from 'three/addons/libs/stats.module.js'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let controls,cubeArr = [],stats


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

controls = new OrbitControls( camera, renderer.domElement );
camera.position.set(0,5,10) // 设置摄像机的位置

// 加入性能监视器
function createStats() {
    stats = new Stats()
    stats.setMode(0) // 0 每秒刷新帧数 1,每帧用时, 2,内存占用
    stats.domElement.style.position = 'fixed'
    stats.domElement.style.left = '0'
    stats.domElement.style.top = '0'
    document.body.appendChild(stats.domElement)

}

// 设置总体的坐标轴
function createAxes (){ // 总体的
    const axesHelper = new THREE.AxesHelper(20)
    scene.add(axesHelper)
}
// 创建一个球体，使用球体 + 标准的网格材质，来对灯光做出反应
function createSphere() {
    const geometery = new THREE.SphereGeometry(1,32,32)
    const material = new THREE.MeshStandardMaterial({
        color: 0xffff00
    })
    const mesh = new THREE.Mesh(geometery, material)
    scene.add(mesh)
}
// 创建光源
function createLight() {
    // 创建光源： 参数1：光源颜色 参数2： 光源强度（值越大越亮）
    const directionalLight = new THREE.DirectionalLight(0xffffff,3)
    scene.add(directionalLight)
    directionalLight.position.set(3.3,3)

    // 创建光源辅助对象，两者要用同种方式创建
    const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1)
    scene.add(directionalLightHelper)
    
}
// 设置动画效果,并让物体动起来
function animate() {
	requestAnimationFrame( animate );
    stats.update()
	controls.update();
    cubeArr.forEach(cube => {
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
    })
	renderer.render( scene, camera );
}
// 根据窗口大小自动按比例缩放
function resize () {
    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth,window.innerHeight)
        camera.aspect = window.innerWidth/window.innerHeight
        camera.updateProjectionMatrix()
    })
}

resize()
createStats()
createLight()
createSphere()
createAxes()


animate()






